<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>安静的一天</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <!-- Add your keywords and description here for SEO. -->

    <meta name="description" content="分享几首安静的歌曲 " />
    <!-- Uncomment this if you need apple touch icon. -->
    <!--
    <link rel="apple-touch-icon" href="touch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
    -->
    <!-- Don't delete this. It's needed for development workflow. -->
    <link rel="stylesheet" href="stylesheets/bundle.css">
</head>

<body>
    <div style='margin:0 auto;display:none;'>
        <img src='./images/logo.png' />
    </div>
    <div class="loading-overlay">
    </div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide slide-1">
                <div class="item-image animated" data-ani-name="fadeIn" data-ani-duration=".5s">
                    <div class="container">
                        <img id='pic' class='pic' src="./images/slide1.png">
                    </div>
                    <div class="mainContainer ">
                        <img class="background-grid" src="images/backroundgrid.png" alt="">
                        <div class='titleTop animated' data-ani-name="" data-ani-duration=".5s">
                            <span class="titleTopLine"></span>
                            <div class="titleTopheader">To be Silent</div>
                            <!-- <div class="titleTopContainer"></div>-->
                        </div>
                        <div class="title animated" data-ani-name="bounceInDown" data-ani-duration=".5s">
                            <span class="secondTitle">SILENT</span >
                          <span class="firstTitle">MELODY</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide slide-2 musicWithCanvas">
                <div class="container">
                    <img id='pic' class='pic' src="./images/slide2.png">
                </div>
                <div class="audioContainer animated" data-ani-name="fadeIn" data-ani-duration=".5s">
                    <div class="circle_inner_play">
                    </div>
                    <div class="circle_inner_pause">
                        ▐▐
                    </div>
                    <audio controls src="http://tool.4vtk.com/music/music.php?hash=3dd5bf1c7ab355d98b080998b3acc825" preload="auto" loop="loop" />
                </div>
                <div class="mainContainer2 animated " data-ani-name="bounceInDown" data-ani-duration=".5s">
                    <span class="titleTopLine"></span>
                    <h1 class="containerTitleWord"> Don't Be A Baby, Baby</h1>
                    <p class="containerWord"> Don't be a baby, Baby By the love that pass you by But if you have to, Baby Go ahead and have your cry I'll be your baby, Baby Truer than the one you knew And someday maybe, Baby Baby You will learn to love me too Don't be a baby, Baby By the love that pass you by But if you have to, Baby Go ahead and have your cry I'll be your baby, Baby Truer than the one you knew And someday maybe,maybe Baby You could learn to love me too Don't be a baby, Baby By the love that pass you by But if you have to, Baby Just go ahead and have your cry For I'll be your baby, Baby Truer than the one you knew And someday maybe maybe, Sweet baby You could learn to love me too You could learn to love me
                    </p>
                </div>
            </div>
            <!-- <div class="swiper-slide slide-3">
                <div class="titleImgContainer">
                    <div class="titleImgContainerSecond">
                        <div class="titleImgContainerThird">
                            <img class="title-Img" src="ihttps://cdn.dribbble.com/users/76269/screenshots/731563/music.png" alt="">
                        </div>
                        <div class="audioContainer" style="">
                            <div class="circle_inner_play">
                            </div>
                            <div class="circle_inner_pause">
                                ▐▐
                            </div>
                            <audio controls src="audios/background.mp3" preload="auto" loop="loop" />
                        </div>
                    </div>
                    <div class="mainContainer2 animated " data-ani-name="bounceInDown" data-ani-duration=".5s">
                        <span class="titleTopLine"></span>
                        <h1 class="containerTitleWord">Hellow</h1>
                        <p class="containerWord">I was staring the dribbble at the most popular designs and I was intensely lookingI was staring the dribbble at the most popular designs and I was intensely lookingI was staring the dribbble at the most popular designs and I was intensely looking </p>
                    </div>
                </div>
            </div>-->
            <div class="swiper-slide slide-3 musicWithCanvas">
                <div class="container">
                    <img id='pic' class='pic' src="./images/slide3.png">
                </div>
                <div class="audioContainer animated" data-ani-name="fadeIn" data-ani-duration=".5s" style="">
                    <div class="circle_inner_play">
                    </div>
                    <div class="circle_inner_pause">
                        ▐▐
                    </div>
                    <audio controls src="https://m7.music.126.net/20170910183242/6179e72c162e2d78cb0de92d3835c1ca/ymusic/6277/7d93/d106/92c22ce4c737a1d10b3dcbdcda4d7dfa.mp3" preload="auto" loop="loop" />
                </div>
                <div class="mainContainer2 animated " data-ani-name="bounceInDown" data-ani-duration=".5s">
                    <span class="titleTopLine"></span>
                    <h1 class="containerTitleWord">Duet</h1>
                    <p class="containerWord">
                        Oh lover hold on 'till I come back again&nbsp; For these arms are growing tired&nbsp; And my tales are wearing thin&nbsp; If you're patient I will surprise&nbsp; When you wake up I'll have come&nbsp; All the ache will settle down&nbsp; And we'll go do all the things we should have done&nbsp; &nbsp; Yes, I remember what we said as we lay down to bed&nbsp; I'll be here if you would only come back home&nbsp; Oh lover I'm lost&nbsp; Because the road I've chosen beckons me away&nbsp; Oh lover don't you roam&nbsp; Now I'm fighting words I never thought I'd say&nbsp; But I remember what we said as we lay down to bed&nbsp; I'll forgive you if you'll just come back home&nbsp; hmmm mmmm&nbsp; hmmmm mmmm&nbsp; Oh lover I know&nbsp; You'll be out there and be thinking just of me&nbsp; And I will find you down the road&nbsp; We'll return back home to where we're meant to be&nbsp; 'Cause I remember what we said as we lay down to bed&nbsp; We'll be back soon as we make history&nbsp;
                    </p>
                </div>
            </div>
        <div class="swiper-slide slide-4 musicWithCanvas">

                <div class="container">
                    <img id='pic' class='pic' src="./images/slide6.png">
                </div>
                 <div class="audioContainer animated" data-ani-name="fadeIn" data-ani-duration=".5s" style="">
                            <div class="circle_inner_play">
                            </div>
                            <div class="circle_inner_pause">
                                ▐▐
                            </div>
                            <audio controls src="https://m8.music.126.net/20170910183324/b901cae5d5a838c79ba17dde7842722e/ymusic/2ed2/d377/1055/e15daea8885e76bac80c245f1027cad7.mp3" preload="auto" loop="loop" />
                        </div>
                <div class="mainContainer2 animated " data-ani-name="bounceInDown" data-ani-duration=".5s">
                    <span class="titleTopLine"></span>
                    <h1 class="containerTitleWord">And Then You</h1>
                    <p class="containerWord">how my thoughts, they spin me round
how my thoughts, they let me down
how my thoughts, they spin me round
how my thoughts, they let me down
how my dreams, they spin me round
how my dreams, they let me down
how my thoughts, they spin me round
how my thoughts, they let me down
then there's you,
then there's you,
then there's you,
then there's you.
now my love it spins me round
how my love, it's let me down
how my thoughts they spin me round
how my thoughts they let me down
then there's you,
then there's you,
then there's you,
then there's you
you know I them too well
I've written them all myself it you can't tell,
with a melody that climbs
and then falls, then falls, then falls,
without you, without you
how my days they spin me round,
how today it sets me down
and how my days they spins me round
and how today it sets me down,
alongside you, alongside you, alongside you</p>
                </div>
         </div>
       <div class="swiper-slide slide-5 musicWithCanvas">

                <div class="container">
                    <img id='pic' class='pic' src="./images/slide7.png">
                </div>
                 <div class="audioContainer animated" data-ani-name="fadeIn" data-ani-duration=".5s" style="">
                            <div class="circle_inner_play">
                            </div>
                            <div class="circle_inner_pause">
                                ▐▐
                            </div>
                            <audio controls src="https://m7.music.126.net/20170910183211/97448d3e54dfa6ac59698ab53ebcee7d/ymusic/ce61/e40b/df29/0c52563cadb01d9c6a5d3136b3525e13.mp3" preload="auto" loop="loop" />
                        </div>
                <div class="mainContainer2 animated " data-ani-name="bounceInDown" data-ani-duration=".5s">
                    <span class="titleTopLine"></span>
                    <h1 class="containerTitleWord"> I Don't Hurt Anymore</h1>
                    <p class="containerWord">It don't hurt anymore, all my teardrops have dried
No more walking the floor with that burning inside
Just to think it could be, time has opened the door
And at last I am free, I don't hurt anymore

No use to deny, I wanted to die the day you said we were through
But now that I find you're out of my mind I can't believe that it's true
I've forgotten somehow that I cared so before
And it's wonderful now, I don't hurt anymore

No use to deny, I wanted to die the day you said we were through
But now that I find you're out of my mind I can't believe that it's true
I've forgotten somehow that I cared so before
And it's wonderful now, I don't hurt anymore</p>
                </div>
         </div>
            <div class="swiper-slide slide-6 musicWithCanvas">
                <div class="container">
                    <img id='pic' class='pic' src="./images/slide5.png">
                </div>
                <div class="audioContainer animated" data-ani-name="fadeIn" data-ani-duration=".5s" style="">
                    <div class="circle_inner_play">
                    </div>
                    <div class="circle_inner_pause">
                        ▐▐
                    </div>
                    <audio controls src="http://tool.4vtk.com/music/music.php?hash=f3be17fabb08ff7bcdef5617645cc094" preload="auto" loop="loop" />
                </div>
                <div class="mainContainer2 animated " data-ani-name="bounceInDown" data-ani-duration=".5s">
                    <span class="titleTopLine"></span>
                    <h1 class="containerTitleWord">You Are You Are</h1>
                    <p class="containerWord">You are you are 

                        Something to see 

                        You are my only fall 

                        You are you are 

                        Just out of reach 

                        ‘Cause I don’t know you at all 

                        And I, 

                        I’d be good to you 

                        I, if you only knew 

                        You are you are 

                        Something that haunts 

                        You are the holy ghost 

                        You are you are 

                        My only song 

                        You are the hymnal lost 

                        And I, 

                        I’d be good to you 

                        I, if you only knew 

                        That I need you 

                        I need you 

                        I need you 

                        And I, 

                        I’d be good to you 

                        I, if you only knew 

                        That I need you 

                        I need you 

                        I need you 

                    </p>
                </div>
            </div>
          <div class="swiper-slide slide-7 musicWithCanvas">

                <div class="container">
                    <img id='pic' class='pic' src="./images/slide4.png">
                </div>
                 <div class="audioContainer animated" data-ani-name="fadeIn" data-ani-duration=".5s" style="">
                            <div class="circle_inner_play">
                            </div>
                            <div class="circle_inner_pause">
                                ▐▐
                            </div>
                            <audio controls src="http://mp3.flash127.com/music/26572.mp3" preload="auto" loop="loop" />
                        </div>
                <div class="mainContainer2 animated " data-ani-name="bounceInDown" data-ani-duration=".5s">
                    <span class="titleTopLine"></span>
                    <h1 class="containerTitleWord">What The World Needs...</h1>
                    <p class="containerWord">What the world needs now
Is love, sweet love
It's the only thing that there's just too little of
What the world needs now
Is love, sweet love
No, not just for some but for everyone
Lord, we don't need another mountain
There are mountains and hillsides enough to climb
There are oceans and rivers enough to cross
Enough to last till the end of time
What the world needs now
Is love, sweet love
It's the only thing that there's just too little of
What the world needs now
Is love, sweet love
No, not just for some but for everyone
Lord, we don't need another meadow
There are cornfields and wheat fields enough to grow
There are sunbeams and moonbeams enough to shine
Oh listen, lord, if you want to know
What the world needs now is love, sweet love
It's the only thing that there's just too little of
What the world needs now is love, sweet love
No, not just for some but for everyone
-What The World Needs Now Is Love-</p>
                </div>
         </div>
           <div class="swiper-slide slide-end musicWithCanvas">
                <div class="container">
                    <img id='pic' class='pic' src="">
                </div>
                
                <div  style="position: fixed;top: 40%;width: 100%;" class=" animated " data-ani-name="fadeIn" data-ani-duration="1s">
                    <span class="titleTopLine"></span>
                    <h1  class="containerTitleWord" style="text-align: center;">感谢欣赏</h1>
                    <p class="containerWord">

                    </p>
                </div>
            </div>
        </div>
        <div class="canvasContainer">
            <canvas id="waves"> </canvas>
        </div>
        <audio id="backgroundMusic" style="" preload="auto" loop="loop">
            <source src="http://link.hhtjim.com/163/109998.mp3" type="audio/mpeg">
        </audio>
        <button class="up-arrow">
            <i class="icon-angle-double-up"></i>
        </button>
        <!-- <button class="up-arrow">
        <i class="icon-angle-double-up"></i>
    </button>-->
        <button class="btn-music">
            <i class="icon-note"></i>
        </button>
        <!-- Don't delete this. It's needed for development workflow. -->
        <script src="javascripts/bundle.js"></script>

</body>
<script>

</script>
</html>






